const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const webpackConfigBase = require('./webpack.base.config')
const OpenBrowserPlugin = require('open-browser-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const PORT = 8686;

function pathJoin(relatedPath) {
    return path.join(__dirname, relatedPath)
}
const webpackConfigDev = {
    plugins: [
        // 定义环境变量为开发环境
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development'),
            IS_DEVELOPMETN: true,
        }),
        // 将打包后的资源注入到自定义的html文件内
        new HtmlWebpackPlugin({
            // 本地自定义模板
            template: pathJoin('../app/index.html'),
        }),
        new OpenBrowserPlugin({
            url: `http://localhost:${PORT}/#/login`,
        })
    ],
    devtool: 'source-map',
    devServer: {
        contentBase: pathJoin('../app'),
        historyApiFallback: false,
        hot: false,
        host: '0.0.0.0',
        port: PORT,
    },
}
module.exports = merge(webpackConfigBase, webpackConfigDev)
